<template>
  <div>
    <div class="from-input">
      <span class="label"
            v-if="label">{{label}}</span>
      <div class="input-content"
           :class="{ 'input-content-border-bottom': isBorderBottom}"
           :style="{'borderColor': inputFocus ? blurBorderrColor:borderrColor}">
        <div class="input-group">
          <input class="input-content-item"
                 :style="{'caretColor': caretColor}"
                 :value="value"
                 :type="type"
                 :maxLength="maxLength"
                 :placeholder="placeholder"
                 @focus="focusHandler"
                 @blur="blurHandler"
                 @input="changeHandler">
          <span class="clear"
                v-show="value"
                @click="clearHandler"></span>
        </div>
        <slot></slot>
      </div>

    </div>
    <p :style="{'color': hasErrorColor}"
       v-show="blurHasError && hasError">{{validate.message}}</p>
  </div>
</template>
<script>
export default {
	props : {
		value : { // 值
			type : String
		},
		label : { // 名称
			type : String,
			default : ''
		},
		maxLength : { // 最大长度
			type : Number,
			default : 10
		},
		type : { // input 类型
			type : String,
			default : 'text'
		},
		placeholder : { // 输入框placeholder
			type : String,
			default : ''
		},
		validate : { // 配置校验
			type : Object,
			required : true
		},
		blurHasError : { // 校验不通过是否在input 下方展示错误信息
			type : Boolean,
			default : false
		},
		hasErrorColor : { // 错误提示的颜色
			type : String,
			default : 'red'
		},
		borderrColor : { // 默认input边框的颜色
			type : String,
			default : '#e6e6e6'
		},
		blurBorderrColor : { // 得到焦点后input边框的颜色
			type : String,
			default : '#ff601a'
		},
		isBorderBottom : { // 是否只有下边框
			type : Boolean,
			default : true
		},
		caretColor : { // 光标色
			type : String,
			default : '#ff601a'
		}
	},
	data () {
		return {
			hasError : false, // 校验不通过的文字颜色
			inputFocus : false, // 得到焦点后输入框变色
			inputValue : ''
		};
	},
	created () {
		if (this.value) {
			this.inputValue = this.value;
			this.inputValidate();
		}
	},
	methods : {
		trim (str) {
			return str.replace(/^\s+|\s+$/g, '');
		},
		focusHandler () {
			this.inputFocus = true;
			this.hasError = false;
			this.checkHandler('focus');
		},
		blurHandler () {
			this.inputFocus = false;
			this.checkHandler('blur');
		},
		changeHandler ($evnet) {
			let v = this.trim($evnet.target.value);
			this.$emit('input', v);
			this.inputValue = v;
			this.checkHandler('change');
		},
		clearHandler () {
			this.hasError = false;
			this.$emit('input', '');
			this.$emit('checkHandler', { name : this.validate.name, isCheck : false });
		},
		checkHandler (type) {
			if (this.validate.trigger.some(v => v === type)) {
				this.inputValidate();
			}
		},
		inputValidate () {
			if (this.validate.rule.test(this.inputValue)) {
				this.hasError = false;
				this.$emit('checkHandler', { name : this.validate.name, isCheck : true });
			} else {
				this.hasError = true;
				this.$emit('checkHandler', { name : this.validate.name, isCheck : false });
			}
		}
	}
};
</script>
<style lang="scss" scoped>
.label {
  margin-right: 10px;
  font-size: 15px;
}
.from-input {
  display: flex;
  align-items: center;
}
.input-content {
  display: flex;
  flex: 1;
  align-items: center;
  border-style: solid;
  border-width: 1px;
  box-sizing: border-box;
}
.input-group {
  flex: 1;
  display: flex;
  position: relative;
}
.input-content-border-bottom {
  border-left: none;
  border-right: none;
  border-top: none;
}
.input-content-item {
  width: 0;
  flex: 1;
  height: 50px;
  font-size: 15px;
  color: #333333;
}
.clear {
  width: 50px;
  height: 50px;
  display: block;
  background: url(../../static/images/input-delete.png) no-repeat center right;
  background-size: 15px 15px;
  position: absolute;
  right: 0;
}
.input-content-item::-webkit-input-placeholder {
  color: #d6d6d6;
}
.input-content-item:-moz-placeholder {
  color: #d6d6d6;
}
.input-content-item::-moz-placeholder {
  color: #d6d6d6;
}
.input-content-item:-ms-input-placeholder {
  color: #d6d6d6;
}
</style>
